<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-25 16:02:11
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-25 17:17:14
 * @FilePath: \appGly\pages\Cards\Cards.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="cardcontent">
    <getdatascrollview :api="getdata" cmax="20">
      <template #default="{ list }">
        <!-- ref="getdatascrollview" :api="getdata" -->
        <u-navbar title="实体卡管理"></u-navbar>
        <view
          v-for="(item, key) in list"
          :key="key"
          class="list-card"
          @click="itemtap(item)"
        >
          <view class="header">
            <view class="iconfont iconhuiyuanchaxun_xiaofeiqia"></view>
            {{ item.printid }}
          </view>
          <view class="content">
            <view class="item">
              <view class="iconfont iconZHicon-"></view>
              {{ item.je / 100 }}元
            </view>
            <view class="item">
              <view class="iconfont iconquyu"></view>
              {{ Station[item.pcs] }}
            </view>
            <view class="item">
              <view class="iconfont iconicon-gerenzhongxin"></view>
              {{ item.b_jh == "1" ? "已激活" : "未激活" }}
            </view>
          </view>
        </view>
      </template>
    </getdatascrollview>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        Station: [],
      };
    },
    created() {
      this.init();
    },
    methods: {
      async init() {
        let Station = await this.$z.request("/Station");
        Station = Station.reduce((acc, e) => {
          return {
            ...acc,
            [e.id]: e.pcs,
          };
        }, {});
        this.Station = Station;
        console.log(Station);
      },
      async getdata(searchdata) {
        let Cards = await this.$z.request("/Cards", {
          type: 2,
          ...searchdata,
        });
        let reqCardsJH = {};
        reqCardsJH.cardsum = Cards.length;
        Cards.forEach((element, i) => {
          reqCardsJH[`printid${i + 1}`] = element.printid;
        });
        let CardsJH = await this.$z.request("/CardsJH", reqCardsJH);
        let CardsJHselect = {};
        CardsJH.forEach((e) => {
          CardsJHselect[e.printid] = e.b_jh;
        });
        Cards.forEach((element, i) => {
          element.b_jh = CardsJHselect[element.printid];
        });
        // console.log(searchdata, "searchdata");
        return Cards;
      },
      itemtap(item) {
        // GetRfCard
        if (item.b_jh == "1") {
          this.$z.gopage(
            `/pages/Cards/Cardedt/Cardedt?printid=${item.printid}`
          );
        } else {
          this.$z.gopage(
            `/pages/Cards/Cardsedt/Cardsedt?printid=${item.printid}`
          );
        }
      },
    },
  };
</script>
<style>
  page {
    background: #efeff4;
  }
</style>
<style lang="scss">
  .cardcontent {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .list-card {
    margin: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;

    .header {
      background: #2093f5;
      height: 88rpx;
      display: flex;
      align-items: center;
      color: #fff;

      .iconfont {
        height: 88rpx;
        width: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48rpx;
      }
    }

    .content {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 50%;
        height: 88rpx;
        display: flex;
        align-items: center;

        .iconfont {
          height: 88rpx;
          width: 88rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 48rpx;
          color: #2093f5;
        }
      }
    }
  }
</style>
